<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="页面内容的简要描述，用于搜索引擎。" />
    <meta name="keywords" content="关键词1, 关键词2, 关键词3" />
    <meta name="author" content="你的名字" />
    <title>页面标题 - 包含相关关键词</title>
    <link rel="canonical" href="https://www.yourwebsite.com/seo.html" />
    <link rel="stylesheet" href="styles.css" />
    <!-- 链接到你的CSS文件 -->
    <script src="script.js" defer></script>
    <!-- 链接到你的JavaScript文件 -->
    <!-- 
  说明：
  语言设置：   设置文档的语言为中文。
  元标签：包括描述和关键词元标签，以帮助搜索引擎理解页面内容。
  标题：页面标题应包含相关关键词，以提高搜索引擎排名。
  结构化内容：使用适当的标题标签（H1, H2, H3）来组织内容，有助于SEO。
  图像：为图像提供 alt 属性，帮助搜索引擎理解图像内容。
  导航：清晰的导航结构有助于用户体验和SEO。
  根据你的具体需求，可以进一步修改和扩展此模板。
  --></head>

  <body>
    <header>
      <h1>主要标题 (H1) - 包含关键词</h1>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="about.html">关于我们</a></li>
        <li><a href="contact.html">联系我们</a></li>
      </ul>
    </nav>

    <main>
      <article>
        <h2>副标题 (H2) - 与内容相关</h2>
        <p>
          这是一个段落，提供与页面主题相关的有价值信息。自然地使用相关关键词。
        </p>

        <h3>子副标题 (H3)</h3>
        <p>另一个段落，深入探讨主题的特定方面。</p>

        <h2>另一个副标题 (H2)</h2>
        <p>提供更多与页面主要主题相关的信息。</p>

        <ul>
          <li>要点1</li>
          <li>要点2</li>
          <li>要点3</li>
        </ul>

        <figure>
          <img src="image.jpg" alt="图片描述" />
          <figcaption>图片的说明文字</figcaption>
        </figure>
      </article>
    </main>

    <footer>
      <p>&copy; 2023 你的公司名称. 保留所有权利。</p>
    </footer>

    <div id="map" style="width: 100%; height: 450px"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: 25.03396368397158, lng: 121.5642493153281 },
          zoom: 13,
        });

        const marker = new google.maps.Marker({
          position: { lat: 25.03396368397158, lng: 121.5642493153281 },
          map: map,
          title: "Vehicle Location",
        });

        const infoWindow = new google.maps.InfoWindow({
          content: "<div><strong>Vehicle 1</strong><br>Online</div>",
        });

        marker.addListener("click", () => {
          infoWindow.open(map, marker);
        });
      }
    </script>
    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    ></script>
  </body>
</html>
